<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_jsx创建虚拟dom</title>
</head>

<body>
    <!-- 准好一个'容器' -->
    <div id="test"></div>
    <!-- 引入react核心库  -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 库  用于支持react 操作dom  -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel  用于将jsx 转化为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- babel 一定要写 -->
    <script type="text/babel">

        // jsx 主要的作用, 就是创建虚拟dom 的时候,更加的方便, 比js 创建虚拟dom
        //  创建虚拟DOM
        // const VDOM = <h1 id="title">Hello,React</h1>
        const VDOM = <h1 id="title"><span>Hello,React</span></h1>
        console.log('虚拟DOM',VDOM)
        console.log(typeof VDOM)
        console.log(VDOM instanceof Object)
        // 渲染虚拟dom 到页面  
        ReactDOM.render(VDOM, document.querySelector('#test'))

       
        //    关于虚拟DOM:
        //  * 1. 本质是Object 类型的对象 (一般对象)
        //  * 2. 虚拟DOM 比较轻, 真实DOM 比较重 因为虚拟DOM是React 内部在用,无需真实DOM上那么多的属性 
        //  * 3. 虚拟DOM 最终会被React 转换为真实DOM.呈现在页面
         


    </script>

</body>

</html>